const url = 'http://fbend.lcann.cn:3000'

// 新增按钮绑定的方法
function btnAdd() {
  // 跳转新增页面
  location.href = './addOrEdit.html'
}

// 过滤按钮绑定的方法
function btnFilter() {
  console.log('过滤');

  // 获取数据
  let keyword = $('input[name=keyword]').val()

  // 向后端发起请求，查询数据 并渲染
  axios.get(`${url}/blogs?keyword=${keyword}`).then(res => {
    // console.log(res);

    // 清除页面所有数据
    let tr = $('tr[class^=blog]')
    tr.remove()
    // 将查询到的数据渲染回页面
    let arr = res.data.data
    arr.forEach(item => {
      let html = `
        <tr class="blog${item.id}">
            <td>${item.id}</td>
            <td>${item.title}</td>
            <td>${item.author}</td>
            <td class="operation">
              <input type="button" value="编辑" onclick="btnEdit(${item.id})">
              <input type="button" value="删除" onclick="btnDel(${item.id})" class="del">
            </td>
        </tr>  
      `

      $('tbody').append(html)
    })
  })
}

// 编辑按钮绑定的方法
function btnEdit(id) {
  console.log('编辑' + id);
  // 跳转页面 并 传递id值
  location.href = `./addOrEdit.html?id=${id}`
}

// 删除按钮绑定的方法
function btnDel(id) {
  // console.log('删除' + id);
  // 1. 询问用户是否确定删除  
  // axios.delete(`${url}/blogs/4`).then().catch()
  // await axios.delete(``)
  if (confirm('确定删除吗？')) {
    // 2. 确定删除则在后端删除（数据库信息删除） 然后重新渲染页面
    // 或者使用remove()删除行元素
    axios.delete(`${url}/blogs/${id}`).then(res => {
      console.log(res);
      if (res.data.code == 1000) {
        // location.href = './index.html'
        let tr = document.querySelector(`.blog${id}`)
        tr.remove()
      }

    }).catch(err => {
      console.log(err);
    })
  }


}

// 保存按钮绑定的方法
async function btnSave() {
  // console.log('保存');
  // 获取请求id值，判断是新增逻辑还是编辑逻辑
  let id = new URLSearchParams(location.search).get('id') || 0
  // 获取页面的内容
  let title = document.querySelector('input[name=title]').value
  let author = document.querySelector('input[name=author]').value
  let obj = { title, author }

  if (id) {   //非0为true，则为修改
    let res = await axios.put(`${url}/blogs/${id}`, obj)
    if (res.status === 200) {
      location.href = './index.html'
    }
  } else {
    // 将数据保存到数据库
    axios.post(`${url}/blogs`, obj).then(res => {
      if (res.status === 200) {
        location.href = './index.html'
      }
    })
  }

}

// 取消按钮绑定的方法
function btnCancel() {
  let isOk = confirm('确定要取消吗？')
  if (isOk) {
    location.href = './index.html'
  }

}


// 为主页面绑定加载事件，显示数据库信息
// let href = this.location.href.split('/')
// if (href[href.length - 1] === 'index.html') {
// window.addEventListener('load', function () {
//   // console.log(111);
//   axios.get(`${url}/blogs`).then(res => {
//     let arr = res.data.data
//     // console.log(arr);
//     // 获取tbody，渲染页面
//     let tbody = this.document.querySelector('tbody')
//     tbody.innerHTML = arr.map(item => `
//       <tr class="blog${item.id}">
//         <td>${item.id}</td>
//         <td>${item.title}</td>
//         <td>${item.author}</td>
//         <td class="operation">
//           <input type="button" value="编辑" onclick="btnEdit(${item.id})">
//           <input type="button" value="删除" onclick="btnDel(${item.id})" class="del">
//         </td>
//       </tr>
//     `).join('')
//   })
// })
// }